<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="800px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="园区/楼栋/单元" prop="park_id">
                        <el-cascader v-model="temp.park_id" :options="park_options" @change="park_change" :props="props_opt"
                            style="width:100%"></el-cascader>
                    </el-form-item>

                    <el-form-item label="房屋状态" prop="house_state">
                        <el-select v-model="temp.house_state" placeholder="请选择" @change="park_change">
                            <el-option v-for="item in houseState_" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="租售类型" prop="house_type">
                        <el-select v-model="temp.house_type" placeholder="请选择" @change="park_change">
                            <el-option v-for="item in houseType_" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="12">

                    <el-form-item label="房屋名称" prop="name">
                        <el-input v-model="temp.name" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="面积m²" prop="area">
                        <el-input v-model="temp.area" type="number" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="房屋功能" prop="house_function">
                        <el-select v-model="temp.house_function" placeholder="请选择" @change="park_change">
                            <el-option v-for="item in houseFunction_" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
            </el-row>

            <!-- <el-form-item label="备注" prop="remark">
                <el-input v-model="temp.remark" placeholder="备注" />
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { createHouse, updateHouse, createHouseTree, updateHouseTree, getHouseTree } from '@/api/assets'// 请求数据
import { houseState, houseType, houseFunction } from '@/utils/enum' //字典

import { treeDataTranslate } from '@/utils'

export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '修改'
            }
            return textMap[type]
        },
        //新增属性名
        // 过滤弹框的标题
        lableFilter (type) {
            const textMap = ['楼栋', '单元', '楼层']
            return textMap[type]
        }
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            park_options: [], // 园区list
            props_opt: {
                label: 'storeyName',
                value: 'id',
                children: "list"
            },
            temp: { // 表单数据
                id: '',
                // park_name: '', // 园区名称
                park_id: '', // 园区/楼栋/单元/层 id
                name: '', // 房屋名称
                area: 0,
                house_state: "1",//房屋状态
                house_type: "1",//租售类型
                house_function: "1",//房屋功能
                // remark: ''
            },
            rule: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                park_id: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                area: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            upData: null
        }
    },
    computed: {
        houseState_ () {
            let arr = []
            for (let key in houseState) {
                arr.push({
                    lable: houseState[key],
                    value: key
                })
            }
            return arr
        },
        houseType_ () {
            let arr = []
            for (let key in houseType) {
                arr.push({
                    lable: houseType[key],
                    value: key
                })
            }
            return arr
        },
        houseFunction_ () {
            let arr = []
            for (let key in houseFunction) {
                arr.push({
                    lable: houseFunction[key],
                    value: key
                })
            }
            return arr
        }
    },
    created () {
    },
    methods: {
        // 初始化
        init (status, param) {
            //   console.log(param)
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
            this.get_park()
        },
        create (param) {
            this.resetTemp(param) // 清空表单
        },
        async update (param) {
            // console.log(param)
            this.upData = param
            let data = Object.assign({}, param)//从上一页带过来当前的数据
            //   const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
            // 成功

            this.temp.id = data.id  //房屋id
            this.temp.name = data.name // 房屋 名称
            this.temp.area = data.area * 1//面积m²
            this.temp.house_function = data.type.toString(); // 功能
            this.temp.house_state = data.state.toString()// 状态
            this.temp.house_type = data.rentType.toString()// 租售类型


        },
        // 获取园区tree
        async get_park () {
            const res = await getHouseTree().catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            let options = treeDataTranslate(data, 'id', 'parentId')
            this.park_options = this.set_tree(options)

            let arr = []
            this.park_options.forEach((item, index) => {
                if (item.parkId == this.upData.parkId) arr.push(item.id);
            })
            arr.push(this.upData.buildingId)
            if (this.upData.unitId) arr.push(this.upData.unitId);
            arr.push(this.upData.floorId)
            this.temp.park_id = arr
        },
        set_tree (data) {
            function treeArr (arr) {
                arr.forEach((item, index) => {
                    if (item.type == 3) delete item.list
                    if (item.list && item.list.length > 0) {
                        treeArr(item.list)
                    }
                })
                return arr
            }
            let res = treeArr(data)
            return res
        },
        // 新增数据清空表单数据
        resetTemp (param) {
            this.temp = {
                id: '',
                // park_name: '', // 园区名称
                park_id: '', // 园区/楼栋/单元/层 id
                name: '', // 房屋名称
                house_state: "1",//房屋状态
                house_type: "1",//租售类型
                house_function: "1",//房屋功能
            }
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                // 园区id
                let index_ = []
                let park = this.park_options.filter((item, index) => {
                    if (item.id == this.temp.park_id[0]) index_.push(index);
                    return item.id == this.temp.park_id[0]
                })
                let building = this.park_options[index_[0]].list.filter((item, index) => {
                    if (item.id == this.temp.park_id[1]) index_.push(index);
                    return item.id == this.temp.park_id[1]
                })
                let unit = this.park_options[index_[0]].list[index_[1]].list.filter((item, index) => {
                    if (item.id == this.temp.park_id[2]) index_.push(index);
                    return item.id == this.temp.park_id[2]
                })
                let floor = null
                if (this.temp.park_id.length == 4) {
                    floor = this.park_options[index_[0]].list[index_[1]].list[index_[2]].list.filter((item, index) => {
                        if (item.id == this.temp.park_id[3]) index_.push(index);
                        return item.id == this.temp.park_id[3]
                    })
                }

                // console.log("park:", park, building, unit, floor)
                const params = {
                    // 'buidingId': this.temp.id || undefined,
                    // 'name': this.temp.name,
                    'id': this.temp.id ? this.temp.id : '',
                    'parkId': park[0].parkId, //园区
                    'parkName': park[0].parkName,
                    'buildingId': this.temp.park_id[1],  //楼栋
                    'buildingName': building[0].storeyName,
                    'unitId': this.temp.park_id.length == 4 ? this.temp.park_id[2] : "",  //单元
                    'unitName': this.temp.park_id.length == 4 ? unit[0].storeyName : "",
                    'floorId': this.temp.park_id.length == 4 ? this.temp.park_id[3] : this.temp.park_id[2],  //楼层
                    'floorName': this.temp.park_id.length == 4 ? floor[0].storeyName : unit[0].storeyName,
                    'name': this.temp.name,   //名称
                    'area': this.temp.area,  //面积
                    'type': this.temp.house_function,  // 功能
                    'state': this.temp.house_state,  // 状态
                    'rentType': this.temp.house_type   // 租售类型
                }
                //没有单元
                if (!params.unitId) {
                    delete params.unitId;
                    delete params.unitName;
                }

                // console.log("params", params)

                const textMap = {
                    create: createHouse, // 新增
                    update: updateHouse // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                        this.$emit('getTree')
                    }
                })
            })
        },

        // ===>>>>>>>>>

        // 选择园区
        park_change (e) {
            console.log(e)
        }

    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
